<template>
  <div v-if="browserRedirect">
    <div>
      <div class="table-page-search-wrapper" v-show="showSizer">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
             <a-col :md="6" :sm="8">
              <a-form-item label="剧本名称">
                <a-input placeholder="请输入剧本名称" v-model="goodName"></a-input>
              </a-form-item>
            </a-col>
            <!-- <a-col :md="6" :sm="8">
              <a-form-item label="申请状态">
                <a-input placeholder="请输入申请状态" v-model="queryParam.applyStatus"></a-input>
              </a-form-item>
            </a-col> -->
            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button
                  type="primary"
                  @click="searchReset"
                  icon="reload"
                  style="margin-left: 8px"
                >重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
        <div class="extra-wrapper" slot="tabBarExtraContent">
          <div class="selSty" @click="showSizer=!showSizer" style="line-height: 60px;">
            <span>筛选</span>
            <img style='margin-top: -3px;margin-left: 3px;' src="../../assets/common-icon-filter.svg">
          </div>
        </div>
        <a-tab-pane loading="true" tab="门店申请信息管理" key="1" style="min-height: 100vh;">
          <ul style="margin: 0;padding:0;list-style-type: none;">
            <li v-for="val in dataSource" class="liCommSty">
              <div style="border-bottom: 1px solid #EBEBEB;padding-bottom: 10px;">
                <div style="color: #333;font-weight: bold;">
                  <span>{{val.productName}}</span>
                  <span style="float: right;color:#888;" v-if="val.state==0">待审核</span>
                  <span style="float: right;color:#00A580;" v-if="val.state==1">已通过</span>
                  <span style="float: right;color:#FF5252;" v-if="val.state==2">未通过</span>
                </div>
              </div>
              <div style="margin-top: 10px;">
                <span style="color: #333;">申请数量</span>
                <span style="float: right;">{{val.applyNum}}</span>
              </div>
              <div style="margin-top: 10px;">
                <span style="color: #333;">门店名称</span>
                <span style="float: right;">{{val.shopName}}</span>
              </div>
              <div style="margin-top: 10px;">
                <span style="color: #333;">门店地址</span>
                <span style="float: right;">{{val.shopAddress}}</span>
              </div>
              <div style="margin-top: 10px;">
                <span style="color: #333;">店铺手机号</span>
                <span style="float: right;">{{val.shopPhone}}</span>
              </div>
              <div style="margin-top: 13px;display: flex;justify-content: flex-end;" v-if="val.state==0">
                <button style="background: #00A580;padding:5px 20px;color:#fff;border:none;border-radius: 3px;" @click="mobileHandle(val.id,1)">通过</button>
                <button style="margin-left:10px;background: #FF5252;padding:5px 20px;color:#fff;border:none;border-radius: 3px;" @click="mobileHandle(val.id,2)">拒绝</button>
              </div>
            </li>
          </ul>
          <a-pagination showQuickJumper :defaultCurrent="ipagination.current" :total="ipagination.total" @change="onChange"/>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
  <a-card v-else :bordered="false" style="border-radius: 10px;">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
           <a-col :md="6" :sm="8">
            <a-form-item label="剧本名称">
              <a-input placeholder="请输入剧本名称" v-model="goodName"></a-input>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="6" :sm="8">
            <a-form-item label="申请状态">
              <a-input placeholder="请输入申请状态" v-model="queryParam.applyStatus"></a-input>
            </a-form-item>
          </a-col> -->
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" style="background: #00c39b;border: 1px solid #00c39b;" key="1" @click="handleApplyYes">通过</a-button>
      <a-button type="primary" style="background: #ff4767;border: 1px solid #ff4767;" @click="modal2Visible=true;failVal=''">拒绝</a-button>      
    </div>

    <!-- table区域-begin -->
    <div class="styXcl">
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{fixed:true,selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"        
      >
        <template slot="htmlSlot" slot-scope="text">
          <div v-if="text==0">待审核</div>
          <div v-if="text==1">通过</div>
          <div v-if="text==2">未通过</div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
          <div v-else @click="jumpProview(text)">
            <img                     
              :src="getImgView(text)"
              height="25px"
              alt="图片不存在"
              style="max-width:80px;font-size: 12px;font-style: italic;"            
            />
          </div>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)"
          >下载</a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a-popconfirm v-if="userAuth2btn == '3'" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <JProviewImg v-if="showImg" @closeProview="closeProview" :imgurl="proviewUrl"></JProviewImg>
    <a-modal
      title="拒绝理由"
      centered
      v-model="modal2Visible"
      @ok="handleApplyNo()"
    >
      <a-textarea v-model="failVal" maxlength="50"></a-textarea>
    </a-modal>
  </a-card>
</template> 

<script>
import { browserRedirect } from '@/utils/util'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import JProviewImg from '@/components/jeecg/JProviewImg.vue'
import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { getAction,postAction } from '@/api/manage'
import { disabledAuthFilter } from "@/utils/authFilter"
export default {
  name: 'BlockProductShopApplyList',
  components: {
    JDictSelectTag,
    JProviewImg
  },
  data() {
    return {
      failVal:"",
      modal2Visible:false,
      browserRedirect:false,
      showSizer:false,
      ipagination1: {
        current: 1,
        pageSize: 10,
        showSizeChanger:false,
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        onChange: page => {
          console.log(page);
        },
        total: 0
      },
      description: '标志申请信息表管理页面',
      proviewUrl:"",
      showImg:false,
      dataSource:[],
      issuerId:"",
      userAuth2btn:"",
      goodName:"",
      selectedRowKeys: [],
      loading:false,
      /* table选中records*/
      selectionRows: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        showSizeChanger:false,
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        total: 0
      },
      // 表头
      columns: [
        {
          title: '剧本名称',
          align: 'center',
          dataIndex: 'productName'
        },
        {
          title: '店铺名称',
          align: 'center',
          dataIndex: 'shopName'
        },
        {
          title: '门店地址',
          align: 'center',
          dataIndex: 'shopAddress'
        },
        {
          title: '店铺手机号',
          align: 'center',
          dataIndex: 'shopPhone'
        },
        {
          title: '申请数量',
          align: 'center',
          dataIndex: 'applyNum'
        },
        {
          title: '申请状态',
          align: 'center',
          dataIndex: 'state',
          scopedSlots: { customRender: 'htmlSlot' }
        },
        {
          title: '拒绝理由',
          align: 'center',
          dataIndex: 'reason'
        },
      ],
      dictOptions: {
        applyStatus: []
      },
      userAuth2btn:"1"
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  mounted(){
    var that = this;
    this.browserRedirect = browserRedirect();
    this.loading=true;
      getAction("/block/blockManufacturerInfo/userAuth2btn")
        .then(res => {
          if (res.success) {
            that.userAuth2btn = res.result.status;
            if(that.userAuth2btn == 3){
              that.issuerId = "";
              this.listInfo();
              return
            }
            let list={
              column: "createTime",
              order: "desc",
              field: "id,,factoryName,companyProfile,createTime,type,name,status,address,phone,imageurl,action",
              pageNo: 1,
              pageSize: 5
            };
            getAction("/block/blockManufacturerInfo/list",list).then((res)=>{
              if (res.success) {
                this.issuerId = res.result.records[0].id;
                this.listInfo();
              } else {
                this.$message.warning(res.message)
              }
            })
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          // this.loading = false
        }) 
  },
  methods: {
    mobileHandle(str,num){
      this.selectedRowKeys = [str];
      this.applyMethod(this, num)
    },
    onChange(pageNumber) {
      this.ipagination.current = pageNumber;
      this.handleTableChange(this.ipagination,{},{});
    },
    listInfo(){
      getAction("https://blockinsight.com.cn/scriptPlay/third/applyRecord?currentPage=1&pageSize=10&issuerId="+this.issuerId).then((res) => {
        if (res.success) {
          this.dataSource = res.data.data;
          this.ipagination.total = res.data.totalSize;
        }
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading=false;
      })
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
    },
    searchReset(){
      this.goodName = "";
      this.searchQuery();
    },
    searchQuery(){
      this.ipagination.current = 1;
      this.loading=true;
      getAction("https://blockinsight.com.cn/scriptPlay/third/applyRecord?currentPage=1&pageSize=10&goodName="+this.goodName+"&issuerId="+this.issuerId).then((res) => {
        if (res.success) {
          this.dataSource = res.data.data;
          this.ipagination.total = res.data.totalSize;
        }
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading=false;
      })
    },
    handleTableChange(pagination, filters, sorter){
      this.ipagination = pagination;
      this.loading=true;
      getAction("https://blockinsight.com.cn/scriptPlay/third/applyRecord?currentPage="+pagination.current+"&pageSize=10&goodName="+this.goodName+"&issuerId="+this.issuerId).then((res) => {
        if (res.success) {
          this.dataSource = res.data.data;
          this.ipagination.total = res.data.totalSize;
        }
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading=false;
      })
    },
    closeProview(){
      this.showImg = false;
    },
    jumpProview(val){
      this.showImg = true;
      this.proviewUrl = window._CONFIG['imgDomainURL']+'/'+val;
    },
    handleApplyYes: function() {
      this.applyMethod(this, 1)
    },
    handleApplyNo: function() {
      if(!this.failVal){
        this.$message.warning('请输入拒绝理由！');
        return;
      }
      this.modal2Visible = false;
      this.applyMethod(this, 2)
    },

    applyMethod: function(that, status) {
      var ids = '';
      if(that.browserRedirect){
        ids = that.selectedRowKeys[0];
      }else{
        if (that.selectedRowKeys.length != 1) {
          that.$message.warning('请选择一条记录！')
          return
        }
        var applystatus=that.selectionRows[0]["state"];
        if(applystatus==1 || applystatus==2){
          that.$message.warning('请选择待审核状态的剧本！');
          return ; 
        }
        ids = that.selectedRowKeys[0];
        this.loading = true;
      }
      if(status == 2){
        var listVal = { applyId: ids, applyType: status,reason:this.failVal };
      }else{
        var listVal = { applyId: ids, applyType: status };
      }
      postAction("https://blockinsight.com.cn/scriptPlay/third/applyAdopt",listVal).then((res) => {
        this.ipagination.current = 1;
        if(res.success){
          this.$message.success(res.msg);
          that.listInfo();
          that.onClearSelected();
        }else{
          this.$message.warning(res.msg);
        }
        this.loading = false;
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.styXcl /deep/ .ant-table-align-center{
  min-width:150px;
  max-height:100px;
}
.liCommSty{
    background-color: #fff;
    padding:15px;
    margin-bottom: 10px;
    border-radius: 6px;
  }
</style>